<template>
  <!-- 发表文章 -->
  <div class="addarticle">
    <el-form ref="articleForm" :model="articleForm" label-width="100px">
      <el-form-item label="文章标题">
        <el-input
          v-model="articleForm.title"
          placeholder="可通过上传md文件文件名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="文章类型">
        <el-input v-model="articleForm.type"></el-input>
      </el-form-item>

      <el-form-item label="文章内容">
        <el-input type="textarea" v-model="articleForm.describe"></el-input>
      </el-form-item>

      <el-form-item label="上传md文件">
        <el-upload
          class="upload-demo"
          drag
          :action="`${baseURL}/administer/article/md`"
          :auto-upload="false"
          :limit="1"
          :with-credentials="true"
          ref="mdForm"
          :on-change="mdChange"
          :before-remove="beforeRemove"
          :on-success="mdUploadSuccess"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>

      <el-form-item label="上传封面">
        <el-upload
          class="avatar-uploader"
          :action="baseURL + '/administer/article/cover'"
          :show-file-list="false"
          :with-credentials="true"
          :auto-upload="false"
          ref="coverForm"
          :on-change="coverChange"
          :on-success="coverUploadSuccess"
        >
          <!-- 缩略图 -->
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">确认发表</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AddArticle",
  data() {
    return {
      articleForm: {
        title: "",  //文章标题
        type:"",    // 文章类型
        describe: "",  //文章内容
        mdUrl:"",  // md文件的路由地址
        coverUrl:"",  //封面的地址
        },
      imageUrl:"",  //封面图
    };
  },
  methods: {
    // 添加md文件，成功上传md
    mdChange(file,fileList){
      if(file.status === "ready"){ // 待上传状态时,对md校验
        if(/^(.+)\.md$/.test(file.name)){  // 只有文件后缀名为.md时
        // 获取上一次正则匹配结果种()组内匹配到1的字符串内容
          this.articleForm.title = RegExp.$1;
        }else{
          this.$message.error("只能上传.md后缀名的文件");
          fileList.pop(); //从尾部删除列表中的文件
        }
      }
    },
    // 从文件列表中删除文件后触发
    beforeRemove(file){
      this.articleForm.title = "";
    },
    // 添加封面图片，触发
    coverChange(file,fileList){
      if(file.status === "ready"){ // 待上传状态时,对md校验
       const isJPG = file.raw.type === "image/jpeg";
       const isLt2M = file.raw.size / 1024 / 1024 < 2;
       if (!isJPG) {
         this.$message.error("上传头像图片只能是 JPG 格式!");
       }
       if (!isLt2M) {
         this.$message.error("上传头像图片大小不能超过 2MB!");
       }
       if(isJPG && isLt2M){ // 图片符合标准
         this.imageUrl = URL.createObjectURL(file.raw);
       }else{
         fileList.pop(); // 删除文件列表中的不符合标准的图片
       }
       }
    },   
    // 点击提交按钮
    submitForm(){
      // 先上传md文件
      this.$refs.mdForm.submit();
    },
    // md上传后接收到响应回自动调用
    mdUploadSuccess(res){
      // md上传失败
        if(res.code) return this.$message.error(res.message);
        this.articleForm.mdUrl = res.mdUrl;  // 得到md的url地址
        //console.log(res.mdUrl,"md的url地址-------------------------------");
     // md上传成功后，接着上传封面图
        if(this.imageUrl){
          // 有封面需要上传封面图
          this.$refs.coverForm.submit();
        }else{
          this.formSubmit();   //调用提交表单的数据到后端
        }
      // this.$message.success(res.message);
    },
    // 封面上传后接收到响应回自动调用
    coverUploadSuccess(res){
       // 封面上传失败
        if(res.code) return this.$message.error(res.message);
        this.articleForm.coverUrl = res.coverUrl;  // 得到封面图地址
        this.formSubmit();   //调用提交表单的数据到后端
        // this.$message.success(res.message);
        // console.log(this.articleForm);
    },
    // 表单提交到后端
    async formSubmit(){
      //向后端发起请求
      let {data} = await this.$axios({
        method:"POST",
        url:"/administer/article/add",
        data:this.articleForm,  //表单数据
      });
      // 跳转到id对应的详情页
     this.$router.push(`/article/${data.data.id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.addarticle {
  margin-top: 15px;
  margin-right: 20px;
}
/deep/ .el-textarea__inner {
  resize: none;
}
// 头像修改组件
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  max-width: 200px;
  max-height: 200px;
  display: block;
}
/deep/ .el-upload {
  border: 1px solid #ccc;
}
</style>